<!doctype html>
<html lang="zh-Hans">

<head>
    <meta charset="utf-8">
    <meta name="author" content="Fresns" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="generator" content="Bootstrap 5">
    <title>编辑器 SDK</title>
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="../assets/css/bootstrap-icons.css">
    <link rel="stylesheet" href="../assets/css/editor.css">
</head>

<body>
    <!--页头-->
    <header>
        <div class="text-center mt-5"><img src="../assets/images/fresns-icon.png" height="80"></div>
    </header>

    <div class="container-fluid my-5">
        <ul class="nav nav-tabs justify-content-center">
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="index.html" role="button" aria-expanded="false">空白编辑器</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="index.html">完整显示</a></li>
                    <li><a class="dropdown-item" href="no-group.html">未开启小组</a></li>
                    <li><a class="dropdown-item" href="hide-title.html">标题弱显示</a></li>
                </ul>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="limit.html" role="button" aria-expanded="false">限制提醒</a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="limit.html">全员发表限制</a></li>
                    <li><a class="dropdown-item" href="role-limit.html">角色限制</a></li>
                    <li><a class="dropdown-item" href="edit-time.html">编辑倒计时</a></li>
                </ul>
            </li>
            <li class="nav-item"><a class="nav-link active" href="edit.html">编辑器有内容</a></li>
            <li class="nav-item"><a class="nav-link" href="upload-image.html">上传了图片</a></li>
            <li class="nav-item"><a class="nav-link" href="upload-video.html">上传了视频</a></li>
            <li class="nav-item"><a class="nav-link" href="upload-audio.html">上传了音频</a></li>
            <li class="nav-item"><a class="nav-link" href="upload-doc.html">上传了文档</a></li>
            <li class="nav-item"><a class="nav-link" href="allow.html">配置了权限</a></li>
            <li class="nav-item"><a class="nav-link" href="extend-frame-text.html">文本框扩展</a></li>
            <li class="nav-item"><a class="nav-link" href="extend-frame-info.html">信息框扩展</a></li>
        </ul>
    </div>
    
    <!--编辑器 开始-->
    <div class="fresns-editor">
        <form>
            <div class="editor-group">
                <div class="d-grid">
                    <button class="rounded-0 border-0 list-group-item list-group-item-action d-flex justify-content-between align-items-center" type="button" data-bs-toggle="modal" data-bs-target="#fresns-group">
                        <span class="py-2 ms-1" id="group"><img src="../assets/images/temp/jarvis.jpg" width="24" height="24" class="rounded me-2">产品经理唐杰</span>
                        <span class="py-2"><i class="bi bi-chevron-right"></i></span>
                    </button>
                </div>
            </div>
            <div class="editor-toolbar sticky-top shadow-sm bg-light">
                <button type="button" class="btn btn-outline-secondary rounded-0 border-0" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                    <div class="d-flex flex-column">
                        <i class="bi bi-emoji-smile"></i><span>表情</span>
                    </div>
                </button>
                <!--表情图列表 开始-->
                <div class="dropdown-menu w-75 rounded-0 pt-0" aria-labelledby="emoji">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation"><button class="nav-link active" id="emoji-1-tab" data-bs-toggle="tab" data-bs-target="#emoji-1" type="button" role="tab" aria-controls="emoji-1" aria-selected="true">默认</button></li>
                        <li class="nav-item" role="presentation"><button class="nav-link" id="emoji-1-tab" data-bs-toggle="tab" data-bs-target="#emoji-2" type="button" role="tab" aria-controls="emoji-2" aria-selected="false">兔斯基</button></li>
                        <li class="nav-item" role="presentation"><button class="nav-link" id="emoji-1-tab" data-bs-toggle="tab" data-bs-target="#emoji-3" type="button" role="tab" aria-controls="emoji-3" aria-selected="false">酷猴</button></li>
                        <li class="nav-item" role="presentation"><button class="nav-link" id="emoji-1-tab" data-bs-toggle="tab" data-bs-target="#emoji-4" type="button" role="tab" aria-controls="emoji-4" aria-selected="false">呆呆男</button></li>
                    </ul>
                    <div class="tab-content p-2" id="emoji">
                        <div class="tab-pane fade show active" id="emoji-1" role="tabpanel" aria-labelledby="emoji-1-tab">
                            <img src="../assets/images/emoji/default/smile.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/sad.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/biggrin.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/cry.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/huffy.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/shocked.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/tongue.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/shy.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/titter.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/sweat.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/mad.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/lol.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/loveliness.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/funk.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/curse.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/dizzy.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/shutup.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/sleepy.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/hug.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/victory.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/time.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/kiss.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/handshake.gif" width="28" height="28">
                            <img src="../assets/images/emoji/default/call.gif" width="28" height="28">
                        </div>
                        <div class="tab-pane fade" id="emoji-2" role="tabpanel" aria-labelledby="emoji-2-tab">
                            <img src="../assets/images/emoji/tuzki/1.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/2.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/3.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/4.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/5.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/6.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/7.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/8.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/9.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/10.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/11.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/12.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/13.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/14.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/15.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/16.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/17.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/18.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/19.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/20.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/21.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/22.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/23.gif" width="50" height="50">
                            <img src="../assets/images/emoji/tuzki/24.gif" width="50" height="50">
                        </div>
                        <div class="tab-pane fade" id="emoji-3" role="tabpanel" aria-labelledby="emoji-3-tab">
                            <img src="../assets/images/emoji/coolmonkey/01.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/02.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/03.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/04.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/05.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/06.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/07.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/08.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/09.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/10.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/11.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/12.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/13.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/14.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/15.gif" width="48" height="48">
                            <img src="../assets/images/emoji/coolmonkey/16.gif" width="48" height="48">
                        </div>
                        <div class="tab-pane fade" id="emoji-4" role="tabpanel" aria-labelledby="emoji-4-tab">
                            <img src="../assets/images/emoji/grapeman/01.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/02.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/03.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/04.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/05.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/06.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/07.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/08.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/09.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/10.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/11.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/12.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/13.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/14.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/15.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/16.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/17.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/18.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/19.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/20.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/21.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/22.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/23.gif" width="48" height="48">
                            <img src="../assets/images/emoji/grapeman/24.gif" width="48" height="48">
                        </div>
                    </div>
                </div>
                <!--表情图列表 结束-->
                <button type="button" class="btn btn-outline-secondary rounded-0 border-0" data-bs-toggle="modal" data-bs-target="#fresns-upload">
                    <div class="d-flex flex-column">
                        <i class="bi bi-image"></i><span>图片</span>
                    </div>
                </button>
                <button type="button" class="btn btn-outline-secondary rounded-0 border-0" data-bs-toggle="modal" data-bs-target="#fresns-upload">
                    <div class="d-flex flex-column">
                        <i class="bi bi-film"></i><span>视频</span>
                    </div>
                </button>
                <button type="button" class="btn btn-outline-secondary rounded-0 border-0" data-bs-toggle="modal" data-bs-target="#fresns-upload">
                    <div class="d-flex flex-column">
                        <i class="bi bi-music-note-beamed"></i><span>音频</span>
                    </div>
                </button>
                <button type="button" class="btn btn-outline-secondary rounded-0 border-0" data-bs-toggle="modal" data-bs-target="#fresns-upload">
                    <div class="d-flex flex-column">
                        <i class="bi bi-file-earmark-text"></i><span>文档</span>
                    </div>
                </button>
                <button type="button" class="btn btn-outline-secondary rounded-0 border-0" data-bs-toggle="modal" data-bs-target="#fresns-mention">
                    <div class="d-flex flex-column">
                        <i class="bi bi-at"></i><span>艾特</span>
                    </div>
                </button>
                <button type="button" class="btn btn-outline-secondary rounded-0 border-0" data-bs-toggle="modal" data-bs-target="#fresns-hashtag">
                    <div class="d-flex flex-column">
                        <i class="bi bi-hash"></i><span>话题</span>
                    </div>
                </button>
                <button type="button" class="btn btn-outline-secondary rounded-0 border-0" data-bs-toggle="dropdown" aria-expanded="false">
                    <div class="d-flex flex-column">
                        <i class="bi bi-menu-up"></i><span>扩展</span>
                    </div>
                </button>
                <!--扩展 开始-->
                <ul class="dropdown-menu rounded-0" aria-labelledby="expands">
                    <li><a class="dropdown-item" data-bs-toggle="collapse" href="#titleCollapse" role="button" aria-expanded="false" aria-controls="titleCollapse"><img src="../assets/images/temp/title.png" width="20" height="20"> 加个标题</a></li>
                    <li><a class="dropdown-item" href="#"><img src="../assets/images/temp/rich-text-editor.png" width="20" height="20"> 富文本编辑</a></li>
                    <li><a class="dropdown-item" href="#">增加投票</a></li>
                    <li><a class="dropdown-item" href="#">设置权限</a></li>
                </ul>
                <!--扩展 结束-->
            </div>
            <!--内容 开始-->
            <div class="editor-content p-3">
                <!--标题-->
                <div class="collapse show" id="titleCollapse">
                    <input type="text" class="form-control form-control-lg rounded-0 border-0 ps-2" id="title" placeholder="标题（非必填）" value="天然的产品经理学习指导手册">
                    <hr>
                </div>
                <!--正文-->
                <textarea class="form-control rounded-0 border-0" id="content" rows="10" placeholder="正文">学习#产品经理知识#的途径有很多，但是最天然有机的途径就是各类生态平台的官方文档。比如#小程序 官网提供的设计文档、开发文档和运营文档，很值得大家一看，即使你不做小程序，里面提到的设计思路、运营建议和基础开发框架，都是新人产品经理不错的学习材料。
https://tangjie.me/blog/247.html
@唐杰 你觉得这个建议怎么样？[smile]</textarea>
                <hr>
                <!--位置和匿名 开始-->
                <div class="d-flex bd-highlight align-items-center">
                    <div class="bd-highlight me-auto">
                        <button type="button" class="btn btn-outline-dark btn-sm" id="lbs"><i class="bi bi-geo-alt-fill"></i> 上海虹桥国际机场</button>
                        <button type="button" class="btn btn-outline-dark btn-sm" id="delete-lbs" data-bs-toggle="tooltip" data-bs-placement="top" title="删除位置"><i class="bi bi-trash"></i></button>
                    </div>
                    <div class="bd-highlight">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" value="1" id="anonymous" checked>
                            <label class="form-check-label" for="anonymous">
                                是否匿名
                            </label>
                        </div>
                    </div>
                </div>
                <!--位置和匿名 结束-->
            </div>
            <!--内容 结束-->
            <div class="editor-submit d-grid">
                <button type="submit" class="btn btn-success btn-lg my-5 mx-3">发 表</button>
            </div>
        </form>
    </div>
    <!--编辑器 结束-->

    <!-- 小组 Modal -->
    <div class="modal fade" id="fresns-group" tabindex="-1" aria-labelledby="fresns-group" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">选择小组</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!--小组列表-->
                    <div class="d-flex align-items-start">
                        <div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <button type="button" class="btn btn-outline-secondary btn-sm mb-2" data-bs-dismiss="modal" aria-label="Close">不发到任何小组</button>
                            <button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">我关注的小组</button>
                            <hr class="dropdown-divider">
                            <button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">小组分类1</button>
                            <button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">小组分类2</button>
                            <button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">小组分类3</button>
                        </div>
                        <div class="tab-content" id="v-pills-tabContent">
                            <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">我关注的小组列表</div>
                            <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">小组列表1</div>
                            <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">小组列表2</div>
                            <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">小组列表3</div>
                        </div>
                    </div>
                    <!--小组列表-->
                </div>
            </div>
        </div>
    </div>

    <!-- 上传 Modal -->
    <div class="modal fade" id="fresns-upload" tabindex="-1" aria-labelledby="fresns-upload" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">上传</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <!--上传控件-->
                    <div class="ratio ratio-21x9">
                        <iframe src="plugin.html" title="上传文件"></iframe>
                    </div>
                    <!--上传控件-->
                </div>
            </div>
        </div>
    </div>

    <!-- 艾特 Modal -->
    <div class="modal fade" id="fresns-mention" tabindex="-1" aria-labelledby="fresns-mention" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="input-group">
                        <span class="input-group-text" id="basic-addon1">@</span>
                        <input type="text" list="memberLists" class="form-control" placeholder="成员名或者昵称">
                        <button class="btn btn-outline-secondary" type="button" id="button-addon2">✓</button>
                    </div>
                    <datalist id="memberLists">
                        <option value="Jarvis">
                        <option value="Jarvis Tang">
                        <option value="Jie Tang">
                        <option value="唐杰">
                        <option value="杰唐">
                    </datalist>
                </div>
            </div>
        </div>
    </div>

    <!-- 话题 Modal -->
    <div class="modal fade" id="fresns-hashtag" tabindex="-1" aria-labelledby="fresns-hashtag" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="input-group">
                        <span class="input-group-text" id="basic-addon1">#</span>
                        <input type="text" list="hashtagLists" class="form-control" placeholder="话题名">
                        <button class="btn btn-outline-secondary" type="button" id="button-addon2">✓</button>
                    </div>
                    <datalist id="hashtagLists">
                        <option value="PHP">
                        <option value="PHP语言">
                        <option value="Fresns">
                        <option value="开源程序">
                        <option value="社交网络服务">
                    </datalist>
                </div>
            </div>
        </div>
    </div>

    <footer class="text-center" style="margin-top:100px;">
        <div><img src="../assets/images/fresns-logo.png" height="30"></div>
        <p class="mt-3 mb-5"><a href="https://tangjie.me" target="_blank">唐杰出品</a></p>
    </footer>
    <script src="../assets/javascript/bootstrap.bundle.min.js"></script>
    <script src="../assets/javascript/fresns.js"></script>
    <script src="../assets/javascript/editor.js"></script>
</body>

</html>